<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX封装_请求参数</title>
</head>
<body>
    <h1>AJAX封装_请求参数</h1>
    <input type="button" value="获取响应数据get" onclick="get_data_get()">
    <input type="button" value="获取响应数据post" onclick="get_data_post()">
    <script>
        function AJAX(options){
            /**
             * options:
             *  type: 请求的方式
             *  url: 请求的地址
             *  data: 请求的参数，类型是JSON
            */

            // 创建 AJAX对象
            let xhr = new XMLHttpRequest()

            // 处理请求的参数
            let params = ''
            for(let key in options.data){
                value = options.data[key]

                // name=sxt&
                params = params + key + '=' + value + '&'
            }

            // 去掉最后一个&
            params = params.substr(0, params.length-1)

            // get请求拼接参数（传递参数）
            if(options.type === 'get'){
                options.url = options.url + '?' + params
            }

            // 配置请求
            xhr.open(options.type, options.url)

            // post传递参数
            if(options.type === 'post'){
                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
                xhr.send(params)
            }else{
                xhr.send()
            }

            // 获取响应
            xhr.onreadystatechange = ()=>{
                if (xhr.readyState === 4 && xhr.status === 200){
                    console.log(xhr.responseText)
                }
            }
        }

        function get_data_get(){
            AJAX({
               type:"get",
               url:"http://httpbin.org/get",
               data:{"name":"sxt","pwd":123}
            })
        }
        function get_data_post(){
            AJAX({
               type:"post",
               url:"http://httpbin.org/post",
               data:{"name":"sxt","pwd":123}
            })
        }
    </script>
</body>
</html>